<template>
  <div class="login-container-box" @keyup.enter="login">
    <h2 class="top-font-box">智+物流管理系统</h2>
    <el-card class="login-box">
      <el-form ref="form" :model="userInfo" :rules="loginRule">
        <el-form-item prop="username">
          <el-input
            placeholder="请输入用户名"
            v-model="userInfo.username"
            autocomplete="off"
            prefix-icon="el-icon-setting"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            autocomplete="off"
            placeholder="输入密码"
            v-model="userInfo.password"
            prefix-icon="el-icon-user"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="code" class="check-box">
          <el-row
            :gutter="2"
            type="flex"
            justify="space-between"
            align="middle"
          >
            <el-col :span="14">
              <el-input
                autocomplete="off"
                placeholder="请输入验证码"
                v-model="userInfo.code"
              >
              </el-input
            ></el-col>
            <el-col :span="8">
              <el-image :src="img" @click="fresh" fit="contain"></el-image
            ></el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div class="login-btn-box">
        <el-button @click="login" class="detail">确定</el-button>
        <el-button @click="reset" class="rePassword">重置</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import user from '../api/login';
export default {
  created() {
    user.getImg().then(res => {
      let img = res.data.data.image;
      this.img = img;
    });
  },
  data() {
    return {
      userInfo: {
        username: 'admin',
        password: '123456',
        code: ''
      },
      loginRule: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'change' },
          {
            min: 5,
            max: 10,
            message: '请输入长度在5-15以内的用户名',
            trigger: 'change'
          }
        ],
        // 密码验证规则
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          {
            min: 6,
            max: 10,
            message: '密码应为6到10个字符',
            trigger: 'change'
          }
        ]
      },
      // 验证码图片
      img: ''
    };
  },
  methods: {
    login() {
      user
        .login(this.userInfo)
        .then(res => {
          if (res.data.code === 400) {
            this.$message.error('请输入正确的用户名和密码');
            return false;
          }
          let token = res.data.data.token;
          window.sessionStorage.setItem('token', token);

          this.$router.push('/home');
          this.$message.success('登录成功 ♥ ');
        })
        .catch(err => {
          console.log(err);
        });
    },
    reset() {
      (this.userInfo.username = ''), (this.userInfo.password = '');
    },
    // 刷新二维码
    fresh() {
      user.getImg().then(res => {
        this.img = res.data.data.image;
      });
    }
  }
};
</script>
<style scoped>
body {
  width: 100vw;
  height: 100vh;
}
.login-container-box {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  text-align: center;
  /* background: url('../assets/image/loginImage/weilai.png') no-repeat;*/
  background-size: 100% 100%;
  background-image: linear-gradient(125deg, #4facfe, #a1c4fd, #c2e9fb, #c2ffd8);
  background-size: 400%;
  animation: bganimation 15s infinite;
}

/* background-image: linear-gradient(125deg,#E4FFCD,#6DD5FA,#2980B9,#E4FFCD);  background-size: 400%; */

@keyframes bganimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.top-font-box {
  padding-top: 170px;
  color: white;
  letter-spacing: 0.3em;
  font-size: 32px;
}
.el-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 338px;
  height: 390px;
  box-sizing: border-box;
  margin: 70px auto 0;
  background: rgba(19, 19, 19, 0.103);
}
.el-input {
  margin-bottom: 20px;
}
.el-button {
  margin: 0 auto;
}
.login-btn-box {
  margin-top: 35px;
  display: flex;
  justify-content: flex-end;
  align-content: center;
}
.el-image {
  cursor: pointer;
}
.check-box,
el-form-item__content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
</style>
